<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- v-bind 绑定属性 -->
      <!-- 如果v-band没有加冒号，等号右边会当做字符串 -->
      <!-- 如果给标签设置的属性不是一个字符串，都要加: -->
      <img :src="url" alt="" />
      <button @click="fn">点我</button>
      <input type="text" />
      <!-- 单选 -->
      <input type="radio" :checked="false" />
    </div>
    <!-- 引入vue -->
    <script src="./vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          url: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
        },
        methods: {
          fn() {
            // 访问变量要加this
            this.url =
              "https://img14.360buyimg.com/imagetools/jfs/t1/66037/3/24346/9414/64b11b21F51d90361/8f015973cbb7de8d.png";
          },
        },
      });
    </script>
  </body>
</html>
